<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8" />
	<title>ichartjs 示例</title>
	<meta name="Description" content="The ichartjs's gallery center,ichartjs 示例中心" />
	<meta name="Keywords" content="ichartjs demo,Html5 demo,ichartjs示例,ichartjs示例,Html5示例,Html5示例" />
	<script type="text/javascript" src="../../ichart.1.2.1.min.js"></script>
	<link rel="stylesheet" href="../css/demo.css" type="text/css"/>
	<script type="text/javascript">
	$(function(){
		var flow=[],
			labels = [],
			BLANK = true;//设置为false，则利用parsePoint显示期间线段。
		
		for(var i=0;i<29;i++){
			if((i>7&&i<15))
				flow.push(0);
			else
			flow.push(Math.floor(Math.random()*(20+((i%12)*5)))+20);
			labels.push((i<9?"0":"")+(i+1));
		}
		
		var data = [
		         	{
		         		name : '产品A',
		         		value:flow,
		         		color:'#6cc4f4',
		         		area_color:'#69aacd',
		         		linewidth:2
		         	}
		         ];
				
		var chart = new iChart.Area2D({
			render : 'canvasDiv',
			data: data,
			align:'center',
			title:{
				text:'2013年春节期间产品A销售情况',
				font:'微软雅黑',
				color:'#d4e0ec',
				height:40,
				border:{
					enable:true,
					width:[0,0,2,0],
					color:'#404b5a'
				}
			},
			footnote:{
				text:'source : erp',
				font:'微软雅黑',
				color:'#d4e0ec',
				height:30,
				border:{
					enable:true,
					width:[2,0,0,0],
					color:'#1e242c'
				}
			},
			padding:'2 10',
			border:{
				width:[0,20,0,20],
				color:'#222831'
			},
			width : 800,
			height : 400,
			shadow:true,
			shadow_color:'#15353a',
			shadow_blur:8,
			background_color : '#38404b',
			gradient : true,//应用背景渐变
			gradient_mode:'LinearGradientDownUp',//渐变类型
			color_factor : 0.2,//渐变因子
			tip:{
				enable:true,
				shadow:true,
				listeners:{
					parseText:function(tip,name,value,text,i){
						return "<span style='color:#005268;font-size:16px;font-weight:600;'>销售额："+value+"万件</span>";
					}
				}
			},
			crosshair:{
				enable:true,
				line_width:2,
				line_color:'#6cc4f4'//十字线的颜色
			},
			sub_option : {
				smooth:true,
				hollow_inside:false,
				hollow_color : '#FEFEFE',
				point_size:10,
				label:false
			},
			listeners:{
				/**
				* d:相当于data[0],即是一个线段的对象
				* v:相当于data[0].value
				* x:计算出来的横坐标
				* x:计算出来的纵坐标
				* j:序号 从0开始
				*/
				parsePoint:function(d,v,x,y,j){
					//利用序号进行过滤春节休息期间
					if(BLANK&&(v==0))
					return {ignored:true}//ignored为true表示忽略该点
				}
			},
			coordinate:{
				width:'86%',
				height:'76%',
				axis:{
					color:'#9f9f9f',
					width:[0,0,2,2]
				},
				grid_color : '#9f9f9f',
				scale:[{
					 position:'left',
					 label:{color:'#d4e0ec',font:'微软雅黑',fontweight:600},
					 start_scale:0,
					 end_scale:100,
					 scale_space:10,
					 scale_size:2,
					 scale_color:'#9f9f9f'
				},{
					 position:'bottom',	
					 label:{color:'#d4e0ec',font:'微软雅黑',fontweight:600},
					 labels:labels
				}]
			}
		});
		
		//利用自定义组件构造说明文本
		chart.plugin(new iChart.Custom({
				drawFn:function(){
					//计算位置
					var coo = chart.getCoordinate(),
						x = coo.get('originx'),
						y = coo.get('originy');
					//渲染单位
					chart.target.textAlign('start')
					.textBaseline('bottom')
					.textFont('600 11px 微软雅黑')
					.fillText('销售量',x-40,y-24,false,'#699fb7')
					.fillText('万件',x-30,y-10,false,'#699fb7')
					.textAlign('end')
					.fillText('2月',x-14,y+coo.height+20,false,'#699fb7');
					
				}
		}));
		//开始画图
		chart.draw();
	});
</script>
</head>
<body>
	<div id='canvasDiv'></div>
	<div class='ichartjs_info'>
		<span class='ichartjs_author'>written by <a title="示例的贡献者" href="mailto:taylor@ichartjs.com">taylor</a></span>
		<span class='ichartjs_btn' onmouseover="this.style.color='#2f99ff'" onmouseout="this.style.color='#0b2946'" onclick="window.top.viewCode(document);">预览代码</span>
		<div class='ichartjs_sm'>说明</div>
		<div class='ichartjs_details'>
			这是一个单数据源面积图示例，此示例展示了某公司在春节期间产品A的销售情况，此示例中通过事件parsePoint对春节放假期间的数据进行忽略处理。达到了一定的展示效果。
			可以与将期间数据设置为0的情况进行对比。
		</div>
		<span class='ichartjs_sm'>备注：</span>
		<span class='ichartjs_details'>
			数据均为模拟。
		</span>
	</div>
</body>
</html>